<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- 启用360浏览器的极速模式(webkit) – -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 若开启长按无法复制链接-->
    <!--meta name="browsermode" content="application"-->
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!--网站开启对web app程序的支持-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!--在web app应用下状态条（屏幕顶部条）的颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!--移动web页面是否自动探测电话号码-->
    <!--<meta http-equiv="x-rim-auto-match" content="none">-->
    <!--手机号码显示为拨号链接-->
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="max-age=300" />
    <meta http-equiv="Expires" content="300" />
    <title>8号金融街</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/usercenter.css">
    <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../assets/layer_mobile/need/layer.css">
    <script src="../js/common.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../assets/swiper/js/swiper.jquery.min.js"></script>
    <script src="../assets/layer_mobile/layer.js"></script>
    <script src="../js/util.js"></script>
</head>
<body>
    <!--用户中心页头-->
    <div class="header">
        <div class="header-panel">
            <div class="header-panel-top">
                <div class="userinfo">
                    <div class="avatar" onclick="changeAvatar()">
                        <img id="uploadPreview" src="../images/mobile-avatar.png" alt="">
                        <input id="uploadImage" type="file" onchange="loadImageFile()">
                    </div>
                    <div class="info-wrapper">
                        <p class="name">Cherry杨岚</p>
                        <p class="user-number">138****1245</p>
                    </div>
                </div>
                <div class="tool-box">
                    <div class="message hasMsg"></div>
                    <div class="setting"></div>
                </div>
            </div>
            <div class="header-panel-bottom">
                <div class="total-return">
                    <p class="total-money">188.00</p>
                    <p>累计返现（元）</p>
                </div>
                <div class="yesterday-return">
                    <p class="yesterday-money">188.00</p>
                    <p>昨日返现（元）</p>
                </div>
            </div>
        </div>
    </div>
    <!--前往推手中心按钮-->
    <div class="header-dropmenu">
        <div class="wrapper">
            <a href="#">
                <div class="usercenter-icon-pusher"></div>
                <span>前往推手账户中心</span>
                <div class="arrow-wrapper">
                    <span class="arrow-right"></span>
                </div>
            </a>
        </div>
    </div>
    <!--用户中心工具栏-->
    <div class="uc-tools">
        <ul class="uc-tools-wrapper">
            <li class="ul-tool">
                <a href="#">
                    <span class="icon-get-cash"></span>
                    <p>提现</p>
                </a>
            </li>
            <li class="ul-tool">
                <a href="#">
                    <span class="icon-trade-details"></span>
                    <p>交易明细</p>
                </a>
            </li>
            <li class="ul-tool">
                <a href="#">
                    <span class="icon-verification"></span>
                    <p>实名认证</p>
                </a>
            </li>
            <li class="ul-tool">
                <a href="#">
                    <span class="icon-bankcard"></span>
                    <p>银行卡</p>
                </a>
            </li>
            <li class="ul-tool">
                <a href="javascript:" onclick="openAutoGetCash()">
                    <span class="icon-auto-get-cash"></span>
                    <p>自动提现</p>
                </a>
            </li>
        </ul>
    </div>
    <!--用户余额信息-->
    <div class="user-account">
        <ul class="user-account-wrapper">
            <li class="user-account-item">
                <span class="item-name">可提现余额</span>
                <div class="arrow-wrapper">
                    <span class="arrow-right"></span>
                </div>
                <span class="total-cash-money">188.00</span>
                <a href="#"></a>
            </li>
            <li class="user-account-item">
                <span class="item-name">平台投资总额</span>
                <span class="plat-invest-money">188.00</span>
            </li>
            <li class="user-account-item">
                <span class="item-name">首投返利总额</span>
                <span class="extra-money">188.00</span>
            </li>
        </ul>
    </div>
    <!--平台投资信息-->
    <div class="plat-invest">
        <div class="plat-invest-header">
            <h5>平台投资<span>1天将从平台同步一次投资明细</span></h5>
        </div>
        <ul class="plat-invest-content">
            <li class="plat-invest-item">
                <a href="#">
                    <div class="plat-logo">
                        <img src="../images/m-platlogo-1.png" alt="">
                    </div>
                    <div class="invest-money-wrapper">
                        <p class="invest-money"><em>25555.00</em>元</p>
                        <p class="invest-money-name">投资总额</p>
                    </div>
                    <div class="return-money-wrapper">
                        <p class="return-money"><em>25555.00</em>元</p>
                        <p class="invest-money-name">投资总额</p>
                    </div>
                    <div class="arrow-wrapper">
                        <span class="arrow-right"></span>
                    </div>
                </a>
            </li>
            <li class="plat-invest-item">
                <a href="#">
                    <div class="plat-logo">
                        <img src="../images/m-platlogo-1.png" alt="">
                    </div>
                    <div class="invest-money-wrapper">
                        <p class="invest-money"><em>25555.00</em>元</p>
                        <p class="invest-money-name">投资总额</p>
                    </div>
                    <div class="return-money-wrapper">
                        <p class="return-money"><em>25555.00</em>元</p>
                        <p class="invest-money-name">投资总额</p>
                    </div>
                    <div class="arrow-wrapper">
                        <span class="arrow-right"></span>
                    </div>
                </a>
            </li>
            <li class="plat-invest-item">
                <a href="#">
                    <div class="plat-logo">
                        <img src="../images/m-platlogo-1.png" alt="">
                    </div>
                    <div class="invest-money-wrapper">
                        <p class="invest-money"><em>25555.00</em>元</p>
                        <p class="invest-money-name">投资总额</p>
                    </div>
                    <div class="return-money-wrapper">
                        <p class="return-money"><em>25555.00</em>元</p>
                        <p class="invest-money-name">投资总额</p>
                    </div>
                    <div class="arrow-wrapper">
                        <span class="arrow-right"></span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!--底部-->
    <div class="footer">
        <div class="footer-item active">
            <a href="#">
                <div class="icon-wrapper active">
                    <i class="basefont"></i>
                </div>
                <span>首页</span>
            </a>
        </div>
        <div class="footer-item">
            <a href="#">
                <div class="icon-wrapper">
                    <i class="licai"></i>
                </div>
                <span>理财</span>
            </a>
        </div>
        <div class="footer-item">
            <a href="#">
                <div class="icon-wrapper">
                    <i class="ceping"></i>
                </div>
                <span>测评</span>
            </a>
        </div>
        <div class="footer-item">
            <a href="#">
                <div class="icon-wrapper">
                    <i class="center"></i>
                </div>
                <span>我的</span>
            </a>
        </div>
    </div>

    <!--若还不是投顾，显示成为投顾按钮-->

    <div class="aside" id="asideBar">
        <a href="#">
            <span class="icon-become-pusher"></span>
            <span class="text">成为投顾</span>
        </a>
    </div>

    <!--若已经是投顾，则显示去到投顾账户按钮按钮-->
    <!--<div class="aside" id="asideBar">-->
        <!--<a href="#">-->
            <!--<span class="pushercenter"></span>-->
            <!--<span class="text">投顾账户</span>-->
        <!--</a>-->
    <!--</div>-->

    <!--<div class="aside" id="asideBar">
        <a href="#">
            <span class="investcenter"></span>
            <span class="text">投资账户</span>
        </a>
    </div>-->
</body>
<script>
    function debounce(func, delay) {
        let timer

        return function (...args) {
            if (timer) {
                clearInterval(timer)
            }
            timer = setTimeout(() => {
                func.apply(this, args)
            }, delay)
        }
    }

    $(function () {
        $(window).bind("scrollstart", function () {
            $("#asideBar").css("transform", "translate3d(100%, 0, 0)")
        })

        $(window).bind("scrollstop", function () {
            $("#asideBar").css("transform", "translate3d(0, 0, 0)")
        })
    })

    function openAutoGetCash() {
        // 开启自动提现弹框
        var h = '';
        h += '<div class="get-cash-layer">'
        h += '<div class="content-wrapper"><h3>开启自动提现</h3>'
        h += '<p class="text">开启自动提现后</p>'
        h += '<p class="text">每天17点将会自动将您账户</p>'
        h += '<p class="text">可提现余额提现到您绑定银行卡哦</p></div>'
//        h += '<div class="btn-wrapper"><a href="#">我不需要</a>'
//        h += '<a href="#">确认开启</a></div>'
        h += '</div>'

        layer.open({
            type: 1
            ,content: h
            ,btn: ['确认', '取消']
            ,yes: function (index) {
                layer.close(index)
            }
        });
    }

//    修改头像功能
    var oFReader = new FileReader();
    var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

    oFReader.onload = function (oFREvent) {
        document.getElementById("uploadPreview").src = oFREvent.target.result;
    };

    function loadImageFile() {
        if (document.getElementById("uploadImage").files.length === 0) { return; }
        var oFile = document.getElementById("uploadImage").files[0];
        if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
        oFReader.readAsDataURL(oFile);
    }

    function changeAvatar() {

//        底部对话框
        layer.open({
            content: ''
            ,className: 'avatar-layer'
            ,btn: ['取消', '从相册选择']
            ,skin: 'footer'
            ,no: function () {
                $('#uploadImage').click()
                layer.closeAll()
            }
            ,yes: function(index){
                layer.close(index);
            }
        });
    }
</script>
</html>